import type { RadioChangeEvent } from 'antd';
import type { ProColumns } from '@ant-design/pro-components';
import { ProCard, ProTable } from '@ant-design/pro-components';
import { Input, message, Radio } from 'antd';
import { useState, useRef } from 'react';
import {
  reqRrderList,
  reqRrderUpdate,
} from '@/services/register';
import { TableListPagination } from './data';
import { PayEditModal } from './components/PayEditModal';
import { PayTypeEditModal } from './components/PayTypeEditModal';
import UserHead from '@/components/UserHead'

// import Camera from './components/Camera'


const { Search } = Input;

export default () => {
  const type = 'table';
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const actionRef = useRef<any>();
  const [row, setRow] = useState<any>();
  const [status, setStatus] = useState('1')

  const pageSize = 10;


  const handleModal = async (show: boolean, row: any = null) => {
    console.log('actionRef?.current ===:>> ', actionRef?.current);
    setRow(row);
    setIsOpen(show);
    actionRef?.current?.reload()
  }


  const handleTableList = async (params: any) => {
    let reqData = {
      ...params,
      pageNum: params.current,
      pageSize: params.pageSize,
    };

    const res = await reqRrderList(reqData);
    if (res?.resultCode === "00000000") {
      const { result, total } = res?.data;
      return {
        data: result,
        success: true,
        total: total,
      };
    }
  };

  const [newParams, setNewParams] = useState({ status: "1" })

  function onSearch(key: string | number) {
    setNewParams((prv) => ({
      ...prv,
      key
    }))
  }

  const [isTeamOpen, setIsTeamOpen] = useState(false);

  function handleTeamOpenModal(bool: any) {
    setRow(null);
    setIsTeamOpen(false)
    actionRef?.current?.reload()
  }

  console.log('isTeamOpen :>> ', isTeamOpen);
  // [1:待支付,2:已支付,3:已退款,4:已取消]
  const optionsStatus = [
    {
      label: '待支付',
      value: '1'
    },
    {
      label: '已支付',
      value: '2'
    },
    {
      label: '已退款',
      value: '3'
    },
    {
      label: '已取消',
      value: '4'
    },
  ];


  function onChangeStatus({ target: { value } }: RadioChangeEvent) {
    setNewParams(prv => ({
      ...prv,
      status: value
    }))
    setStatus(value);
  }


  function onPay(row: any) {
    setRow(row);
    setIsTeamOpen(true)
  }

  // 状态[1:待支付,2:已支付,3:已退款,4:已取消]
  const statusMap = {
    1: '待支付',
    2: '已支付',
    3: '已退款',
    4: '已取消',
  }


  async function changPay(row: any, status: any) {
    const res = await reqRrderUpdate({
      id: row?.id,
      discountPrice: row?.discountPrice,
      money: row?.money,
      originalPrice: row?.originalPrice,
      status,
      payType: row?.payType,
    })
    if (res?.resultCode === "00000000") {
      message.success(res?.message)
      actionRef?.current?.reload()
    } else {
      message.error(res?.message)
    }
  }

  // 收费项目[1:挂号费,2:医药费,3:快递费]

  const projectNameMap = {
    1: '挂号费',
    2: '医药费',
    3: '快递费',
  }

  const columns: ProColumns[] = [
    {
      title: '姓名',
      key: 'tyPatientName',
      search: false,
      align: 'center',
      width: 160,
      render: (text, row: any) => (
        <UserHead data={row} />
      ),
    },
    {
      title: '手机号',
      dataIndex: 'phoneNum',
      search: false,
      align: 'center',
      width: 120,
      // render: (text, row: any) => (
      //   <div>{row?.gender == 0 ? '男' : '女'}</div>
      // ),
    },
    {
      title: '项目',
      key: 'projectName',
      search: false,
      align: 'center',
      width: 100,
      render: (text, row: any) => (
        <div>{row?.projectName && projectNameMap[row?.projectName]}</div>
      ),
    },
    {
      title: '预约时间',
      dataIndex: 'appointDate',
      width: 100,
      search: false,
      align: 'center',
      render:(_, record)=>{
        return <div>{record?.appointDate} {record?.appointTime}</div>
      }
    },
    {
      title: '预约医生',
      width: 100,
      dataIndex: 'tyUserName',
      search: false,
      align: 'center',
    },

    {
      title: '折扣',
      dataIndex: 'discountPrice',
      width: 60,
      search: false,
      align: 'center',
    },
    {
      title: '原价(元)',
      dataIndex: 'originalPrice',
      width: 80,
      search: false,
      align: 'center',
    },
    {
      title: '金额(元)',
      dataIndex: 'money',
      width: 80,
      search: false,
      align: 'center',
    },
    {
      title: '状态',
      key: 'status',
      width: 80,
      align: 'center',
      render: (text, row: any) => (
        <div>
          {
            row?.status && statusMap[row?.status]
          }
        </div>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      width: 200,
      search: false,
      align: 'center',
    },
    {
      title: '操作',
      valueType: 'option',
      dataIndex: 'id',
      align: 'center',
      width: '160px',
      fixed: 'right',
      render: (text, row) => [
        // [1:待支付,2:已支付,3:已退款,4:已取消]
        (row?.status == 1 && <a onClick={() => onPay(row)} key='1'>支付</a>),
        (row?.status == 1 && <a onClick={() => changPay(row, 4)} key='2'>取消</a>),
        (row?.status == 2 && row?.status != 1 && <a onClick={() => changPay(row, 3)} key='3'>退回</a>),
        // (row?.status == 1 && <a onClick={() => handleModal(true, row)} key='4'>编辑</a>),
        // <a key='5'>查看</a>
      ],
    },
  ];
  return (
    <>
      {/* <Camera /> */}
      <ProCard>
        <ProTable<TableListData>
          columns={columns}
          type={type as 'table'}
          search={false}
          actionRef={actionRef}
          params={newParams}
          request={(params): Promise<any> => handleTableList(params)}
          pagination={{ pageSize }}
          rowKey='id'
          dateFormatter="string"
          headerTitle=""
          scroll={{ x: 1100 }}
          toolBarRender={() => [
            <Radio.Group
              options={optionsStatus}
              onChange={onChangeStatus}
              value={status}
              optionType="button"
              buttonStyle="solid"
              key="1"
            />,
            <Search
              key="3"
              placeholder=""
              allowClear
              enterButton="搜索"
              onSearch={onSearch}
            />,
          ]
          }
        />
        {
          isOpen ?
            <PayEditModal
              isOpen={isOpen}
              handleModal={handleModal}
              row={row}
            />
            : null
        }

        {
          isTeamOpen ?
            <PayTypeEditModal
              isOpen={isTeamOpen}
              handleModal={handleTeamOpenModal}
              row={row}
              actionRef={actionRef}
            />
            : null
        }
      </ProCard >
    </>
  );
};

